<template>
	<view class="SafeCenter">
		<topbar-safe-center></topbar-safe-center>
		<view class="bgcolor"></view>
		<view class="SafeCenter-list">
			<view class="changpass" @click="changpass">
				<view class="">修改密码</view>
				<u-icon name="arrow-right" color="#acacac" size="28"></u-icon>
			</view>
			<view class="delAccount" @click="delAccount">
				<view class="">注销账号</view>
				<u-icon name="arrow-right" color="#acacac" size="28"></u-icon>
			</view>
		</view>
		<u-button hover-class="none" shape="circle" :custom-style="commitMall"  @click="outLogin">退出登录</u-button>
		<u-modal v-model="delShow" :content="delContent" title="注销账号" :show-cancel-button="true" confirm-color="#0C34BA" @confirm="postDel"></u-modal>
		<u-popup v-model="isShowRefister" mode="bottom" width="100%" height="40%" :closeable="true">
			<view class="screen">
				<view class="screen-text">修改密码</view>
				<view >
					<u-form :model="form" ref="uForm" class="in-msg">
						<u-form-item label="旧密码" prop="olds"label-width="200rpx">
							<u-input v-model="form.olds" type="password" placeholder="旧密码(首字符必须为字母)"/>
						</u-form-item>
						<u-form-item label="新密码" prop="news" label-width="200rpx">
							<u-input v-model="form.news" type="password" placeholder="新密码(首字符必须为字母)"/>
						</u-form-item>
					</u-form>
				</view>
				<view class="login-register">
					<u-button shape="circle" class="login" hover-class="none" @click="submit">提交</u-button>
				</view>	
			</view>
		</u-popup>
	</view>
</template>

<script>
	import TopbarSafeCenter from "./childSafeCenter/TopbarSafeCenter.vue"
	
	import {postOutLogin,postDelAccount,postNewPass} from "network/safeCenter.js"
	
	export default{
		components:{
			TopbarSafeCenter
		},
		updated() {
			this.$refs.uForm.setRules(this.rules);	
		},
		data() {
			return {
				commitMall:{
					color: "#FFFFFF",
					fontSize: "30rpx",
					backgroundColor:"#0C34BA",
					margin:"200rpx 20rpx 0rpx 20rpx"
				},
				delShow:false,
				delContent:"是否注销账号，一旦注销无法恢复！",
				isShowRefister:false,
				form:{
						olds:"",
						news:"",
					},
				rules: {
					olds: [
						{ 
							required: true, 
							message: '请输入正确密码', 
							pattern: /^[A-Za-z]\w{5,15}$/,
						}
					],
					news: [
						{
							required: true, 
							pattern:/^[A-Za-z]\w{5,15}$/,
							message: '请输入正确密码', 
						}
					],
				}
			}
		},
		methods:{
			changpass(){
				this.isShowRefister = true
			},
			delAccount(){
				this.delShow = true
			},
			postDel(){
				postDelAccount().then(res=>{
					if(res.data.code == "G001"){
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:"../../../login/Login"
							})
						},1000)
						uni.clearStorageSync()
					}
				})
			},
			outLogin(){
				postOutLogin().then(res=>{
					if(res.data.code == "F001"){
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:"../../../login/Login"
							})
						},1000)
						uni.clearStorageSync()
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
				if (valid) {
					postNewPass(this.form.news,this.form.olds).then(res=>{
						if(res.data.code == "E001"){
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon:'none'
							});
							this.isShowRefister = false
							setTimeout(()=>{
								uni.navigateTo({
									url:"../../../login/Login"
								})
							},1000)
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon:'none'
							});
							this.isShowRefister = false
						}
					})
					// uni.switchTab({
					// 	url:"../home/Home"
					// })
					}
				});
			},
		}
	}
</script>

<style scoped>
	.bgcolor{
		width: 100%;
		height: 200rpx;
		background-color: #0C34BA
	}
	.SafeCenter-list{
		
	}
	.changpass{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 40rpx 0rpx 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #e1e1e1;
	}
	.delAccount{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 0rpx 40rpx;
	}
	/* .register-screen{
		margin: 60rpx 20rpx 0rpx 20rpx;
	}
	.register{
		border-color:  #9d9e9e;
		width: 100%;
	} */
	.screen{
		margin: 30rpx 40rpx ;
	}
	.screen-text{
		font-size: 40rpx;
	}
	.login-register{
		width: 100%;
		margin-top: 70rpx;
	}
	.login{
		width: 100%;
		color: #FFFFFF;
		font-size: 30rpx;
		background-color: #0C34BA;
	}
	.in-msg{
		margin-top: 70rpx;
	}
	.register{
		margin-top: 120rpx;
	}
</style>
